<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="排班"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="800px"
    >
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="线路" prop="lineId">
                <el-select
                    v-model="form.lineId"
                    filterable
                    placeholder="请选择"
                    @change="getVehicleTypeList()"
                    style="width:350px;"
                >
                    <el-option
                        v-for="item in lineOptions"
                        :key="item.id"
                        :label="item.lineName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="车型" prop="vehicleTypeId">
                <el-select
                    v-model="form.vehicleTypeId"
                    placeholder="请选择"
                    style="width:350px;"
                >
                    <el-option
                        v-for="item in vehicleTypeList"
                        :key="item.id"
                        :label="item.vehicleTypeName"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="日期" prop="dateRange">
                <el-date-picker
                    v-model="form.dateRange"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                />
            </el-form-item>
            <el-form-item label="时间" prop="timeRange">
                <el-checkbox-group v-model="form.timeRange">
                    <el-checkbox v-for="item in timeRangeList" :label="item">{{ item }}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="优惠活动" prop="discountedActivitiesId">
                <el-select
                    v-model="form.discountedActivitiesId"
                    placeholder="请选择"
                    style="width:350px;"
                >
                    <el-option
                        v-for="item in discountedActivitiesOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="积分" prop="maxUseCreditNum">
                <el-input type="number" v-model="form.maxUseCreditNum" placeholder="请输入"
                    style="width:350px;"/>
                <div class="form-tips">一个座位最多可用积分数</div>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-popconfirm :title="'确定排班吗？'" @onConfirm="submitForm()">
                <el-button slot="reference" type="primary">确定</el-button>
            </el-popconfirm>
        </span>
    </el-dialog>
</template>

<script>
import {ArrangeApi} from '@/api/intercity/ArrangeApi'
import {LineApi} from '@/api/intercity/LineApi'
import {LineSectionSeatApi} from '@/api/intercity/LineSectionSeatApi'
import {LineGroupApi} from '@/api/intercity/LineGroupApi'
import {Common} from '@/utils/common'
import {DiscountedActivitiesApi} from '@/api/intercity/DiscountedActivitiesApi'

export default {
    name: 'CreateArrange',
    components: {},
    data() {
        return {
            form: {
                lineId: '',
                vehicleTypeId: '',
                dateRange: [],
                timeRange: [],
                discountedActivitiesId: '',
                maxUseCreditNum: 0
            },
            timeRangeList: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00',
                '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                '21:00', '22:00', '23:00'],
            rules: {
                lineId: [
                    {required: true, message: '请选择线路', trigger: 'change'}
                ],
                vehicleTypeId: [
                    {required: true, message: '请选择车型', trigger: 'change'}
                ],
                dateRange: [
                    {required: true, message: '请输选择排班日期', trigger: 'blur'}
                ],
                timeRange: [
                    {required: true, message: '请输选择排班时间', trigger: 'blur'}
                ]
            },
            dialogVisible: false,
            lineOptions: [],
            vehicleTypeList: [],
            discountedActivitiesOptions:[]
        }
    },
    methods: {
        // 显示组件
        showCreateArrange(data) {
            this.dialogVisible = true
            this.getLineList()
            DiscountedActivitiesApi.getList({status:true}).then((data) => {
                this.discountedActivitiesOptions = data
            })
            if (this.$refs['formRef'] !== undefined) {
                this.$refs['formRef'].resetFields()
            }

        },

        // 获取线路列表
        getLineList() {
            LineApi.getList().then((data) => {
                this.lineOptions = data
            })
        },

        // 获取线路组下的车型列表
        getVehicleTypeList() {
            if (!this.form.lineId) {
                return false
            }

            const data = this.lineOptions.find(item => item.id === this.form.lineId)

            LineGroupApi.getVehicleTypeListByLineGroupId(data.lineGroupId).then((data) => {
                this.vehicleTypeList = data
            })
        },

        // 日期段转换
        dateRangeToDateArr(dateRange) {
            const startDate = dateRange[0]
            const endDate = dateRange[1]

            const days = endDate.getTime() - startDate.getTime()
            const day = parseInt(days / (1000 * 60 * 60 * 24))

            const al = []
            for (let i = 0; i <= day; i++) {
                const newDate = new Date(Common.timeFormat(startDate))

                const date = newDate.setDate(newDate.getDate() + i)
                al.push(Common.timeFormat(new Date(date), 2))
            }

            return al
        },

        // 提交表单
        submitForm() {
            const that = this
            that.$refs['formRef'].validate((valid) => {
                if (valid) {
                    const data = Object.assign({}, that.form)

                    data.dateRange = that.dateRangeToDateArr(data.dateRange)

                    const loading = this.$loading({
                      lock: true,
                      text: '创建班次中...',
                      spinner: 'el-icon-loading',
                      background: 'rgba(0, 0, 0, 0.7)'
                    });

                    ArrangeApi.createArrange(data).then((response) => {
                        loading.close();
                        that.dialogVisible = false
                        that.$emit('refresh')
                    }).catch(()=>{
                        loading.close();
                    })
                }
            })
        }
    }
}
</script>
